<template>
    <ul class="tabList">
        <li 
            v-for="(tab, index) in tabArr" 
            :key="tab"
            :class="{ 'on' : eq == index }"
            @click="tabFun(index)"
        >
            {{ tab }}
        </li>
        <li 
            class="line" 
            :style="'transform: translate3d(' + tabX + 'px, 0, 0);'"
        >
        </li> 
    </ul>
</template>

<script>
export default {
    data () {
        return {
            eq: 0,
            tabX: 0,//TAB的X轴位置
            contentX: 0,//内容区域的X轴位置
            sysW: document.documentElement.clientWidth,//可视区域的宽度
            sysH: document.documentElement.clientHeight - 150,//可视区域的高度
        }
    },
    methods: {
        tabFun (index) {
            this.eq = index
            if (index == 0) { 
                this.tabX  = 0
                this.contentX = 0
            } else {     
                this.tabX = this.sysW / 2
                this.contentX = -this.sysW
            }   
            this.$parent.tabFun (index); //子组件调用父组件 tabFun 方法       
        }
    },
    props: ['tabArr']
}    
</script>

<style>

</style>
